// yjj&ly
$(function () {
    //相当于window.onload

    for (let i = 0; i <contentJson.length; i++) {
        let mid = $('.mid .content');
        mid.append(
            $('<div/>').addClass(' mid_box').append(
                $('<div/>').addClass('mid_box_content').append(
                    $('<div/>').addClass('mid_box_top').append(
                        $('<img/>').attr('src','img/content/' + contentJson[i].img)
                    )
                ).append(//中
                    $('<div/>').addClass('mid_box_mid').append(
                        $('<p/>').addClass('mid_box_mid_tittle').append(contentJson[i].title)
                    ).append(
                        $('<p/>').addClass('mid_box_mid_type').append(contentJson[i].subtitle)
                    ).append(
                        $('<p/>').addClass('mid_box_mid_foot').append(
                            $('<i>').addClass('fa fa-eye').attr('aria-hidden','true'),
                            $('<span/>').addClass('view').append(contentJson[i].view)
                        ).append(
                            $('<i>').addClass('fa fa-commenting-o').attr('aria-hidden','true'),
                            $('<span/>').addClass('remark').append(contentJson[i].remark)
                        ).append(
                            $('<i>').addClass('fa fa-thumbs-o-up').attr('aria-hidden','true'),
                            $('<span/>').addClass('praise').append(contentJson[i].praise)
                        )
                    )
                ).append(//下
                    $('<div/>').addClass('mid_box_foot').append(
                        $('<span/>').append(
                            $('<a/>').attr('href','#').append(
                                $('<img/>').attr('src','img/content/' + contentJson[i].head),
                                contentJson[i].name
                            )
                        ).append(
                            $('<span/>').addClass('mid_box_foot_left').append(
                                $('<div/>').addClass('author-info').append(
                                    $('<div/>').addClass('author-content')
                                )
                            )
                        ).append(
                            $('<span/>').addClass('mid_box_foot_right').append(contentJson[i].time)
                        )
                    )
                )
            )
        )
    }
});
contentJson=[
    {
        "img": "01d2c35def2b81a8012138538d3ece.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        "title": "红衣教",
        "subtitle": "三维-人物/生物",
        "view": 4650,
        "remark": 29,
        "praise": 376,
        "head": "042f0855481a520000019ae9c4ac8d.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        "name": "罗其胜",
        "time": "3小时前"
    },
    {
        "img": "018a6e5def1014a80121385364e496.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        "title": "实心图标与空心图标的区别？",
        "subtitle": "文章-观点-UI",
        "view": 5534,
        "remark": 17,
        "praise": 327,
        "head": "0197af5c722414a801213f26349f6a.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        "name": "呆总、",
        "time": "5小时前"
    }
];
